<template>
	<page-loading :show="totalMoney" mode="if">
		<view class="wrap">
			<view class="total">
				<view class="pad-t-b-15 flex flex-jc-sa flex-ai-c u-text-center">
					<view>
						<view class="textTitle">{{ totalMoney.deviceTotalNum || 0 }}</view>
						<view class="font-24 color-666">拟投入设备数（台）</view>
					</view>
					<view>
						<view class="textTitle">{{ totalMoney.devicesTotalCost || 0 }}</view>
						<view class="font-24 color-666">总投入资金</view>
					</view>
					<view>
						<view class="textTitle">{{ totalMoney.deviceTotalNum || 0 }}</view>
						<view class="font-24 color-666">已安装设备数(台）</view>
					</view>
				</view>
				<view class="mt-10 pad-t-b-15 flex flex-jc-sa flex-ai-c u-text-center">
					<view>
						<view class="textTitle color-41CB05">{{ totalMoney.deviceTotalPayoff || 0 }}</view>
						<view class="font-24 color-666">已回本（元）</view>
					</view>
					<view>
						<view class="textTitle">{{ totalMoney.payoffRate || 0 }}%</view>
						<view class="font-24 color-666">回本率</view>
					</view>
					<view>
						<view class="textTitle">{{ totalMoney.deviceTotalPayoff || 0 }}</view>
						<view class="font-24 color-666">已安装总需回本</view>
					</view>
				</view>
			</view>
			<view class="main">
				<u-tabs-swiper
					ref="tabs"
					name="cate_name"
					count="cate_id"
					:list="statusList"
					:current="current"
					active-color="#FFE23E"
					:is-scroll="false"
					inactive-color="#999"
					@change="changeStatus"
				></u-tabs-swiper>
				<view class="scrollwidth">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="$u.throttle(scrolltolower, 1000)">
						<view class="liststyle" v-for="(it, index) in stationList" :key="index">
							<view class="pad-t-b-10 pad-b-25 flex border-bottom-1">
								<view class="width-50">
									<view class="font-32 font-bold">{{ it.station_Name }}</view>
								</view>
								<view class="width-50 u-text-right">
									<view class="font-24 color-F30000">{{ returnStatus(it.devicePayoffStatus) }}</view>
								</view>
							</view>
							<view class="pad-t-b-15 flex flex-jc-sa flex-ai-c u-text-center">
								<view>
									<view class="textTitle color-41CB05">{{ it.device_Payoff || 0 }}</view>
									<view class="font-24 color-666">已回本（元）</view>
								</view>
								<view>
									<view class="textTitle">{{ it.payoffRate || 0 }}%</view>
									<view class="font-24 color-666">回本率</view>
								</view>
								<view>
									<view class="textTitle">{{ it.devices_Cost || 0 }}</view>
									<view class="font-24 color-666">总需回本（元）</view>
								</view>
							</view>
							<view class="mt-20"><view class="font-28 font-bold">洗车机3</view></view>
							<view class="" v-if="it.contraction">
								<view
									v-for="(item, index1) in it.selfServiceCarWashDevicePayoffMachinesList"
									class="pad-t-b-15 pad-b-25 flex flex-jc-sa flex-ai-c u-text-center color-666 border-bottom-1"
								>
									<view>
										<view class="font-26">{{ item.machine_Code }}</view>
										<view class="font-24">设备编号</view>
									</view>
									<view>
										<view class="font-26">{{ list.machine_Type }}</view>
										<view class="font-24">设备型号</view>
									</view>
									<view>
										<view class="font-26">{{ item.device_Cost }}</view>
										<view class="font-24">设备价格（元）</view>
									</view>
								</view>
							</view>
							<view class="">
								<view class="contraction" @click="changeContraction(index)"><u-icon size="40" :name="it.contraction ? 'arrow-up' : 'arrow-down'" color="#979797"></u-icon></view>
							</view>
						</view>
						<u-loadmore v-if="stationList.length > 0" :status="loadStatus[loadStatusId]" bgColor="#fff"></u-loadmore>
						<view class="u-text-center mt-40 pad-t-b-40" v-else>
							<image class="toastImg" src="../../static/img/images/tu.png" mode=""></image>
							<view class="color-999">暂无设备数据</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</page-loading>
</template>

<script>
export default {
	data() {
		return {
			list: {},
			// 查询状态，0：全部,1：待回本,5：回本中，10：完成，
			statusList: [{ cate_name: '全部', cate_id: 0 }, { cate_name: '待回本', cate_id: 1 }, { cate_name: '回本中', cate_id: 5 }, { cate_name: '完成', cate_id: 10 }],
			current: 0,
			statusId: 0,
			contraction: true,
			pageIndex: 1,
			pageSize: 10,
			totalMoney: {},
			stationList: [],
			loadStatus: ['loadmore', 'loading', 'nomore'],
			loadStatusId: 0
		};
	},
	mounted() {
		this.GetSelfServiceCarWashDevicePayoffList();
		this.GetSelfServiceCarWashDeviceTotalPayoff();
	},
	methods: {
		// 获取我的基建洗车站点回本情况列表
		async GetSelfServiceCarWashDevicePayoffList() {
			this.loadStatusId = 1;
			try {
				let data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					devicePayoffStatus: this.statusId
				};
				const res = await this.$api.washCar.GetSelfServiceCarWashDevicePayoffList(data);
				this.stationList = this.stationList.concat(res.data.list);
				this.stationList.forEach(it => {
					it.contraction = false;
				});
				this.totalpage = res.data.total;
				if (this.totalpage < 10 || this.totalpage / 10 > this.pageIndex) {
					this.loadStatusId = 2;
				}
				// console.log(res);
			} catch (e) {
				//TODO handle the exception
			}
		},
		// 获取我的基建总回本
		async GetSelfServiceCarWashDeviceTotalPayoff() {
			// this.loadStatus = 'loading'
			try {
				const res = await this.$api.washCar.GetSelfServiceCarWashDeviceTotalPayoff();
				console.log(res);
				this.totalMoney = res.data;
			} catch (e) {
				//TODO handle the exception
			}
		},
		scrolltolower() {
			console.log('触底了');
			if (this.totalpage / 10 > this.pageIndex) {
				this.pageIndex++;
				this.GetSelfServiceCarWashDevicePayoffList();
			} else {
				this.loadStatusId = 2;
			}
		},
		changeStatus(e) {
			console.log(e);
			this.current = e;
			this.statusId = this.statusList[e].cate_id;
			this.stationList = [];
			this.GetSelfServiceCarWashDevicePayoffList();
		},
		returnStatus(id) {
			let name = '';
			this.statusList.forEach(it => {
				if (id !== 0) {
					if (it.cate_id === id) {
						name = it.cate_name;
					}
				}
			});
			return name;
		},
		changeContraction(index) {
			let data = this.stationList[index];
			data.contraction = !this.stationList[index].contraction;
			this.$set(this.stationList, index, data);
			// this.stationList[index].contraction=!this.stationList[index].contraction
			console.log(this.stationList[index].contraction);
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5 !important;
}
.total,
.main {
	padding: 20rpx;
	background: #fff;
	border-radius: 0rpx 0rpx 20rpx 20rpx;
}
.main {
	margin-top: 20rpx;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
}
.liststyle {
	width: 96%;
	margin: 20rpx auto;
	padding: 20rpx;
	background: #ffffff;
	box-shadow: 0px 0px 10px 0px rgba(31, 31, 31, 0.1);
	border-radius: 10px;
}
.color-F30000 {
	color: #f30000;
}
.textTitle {
	font-size: 40rpx;
	color: #333;
	padding: 10rpx 0rpx;
	font-weight: bold;
}
.contraction {
	width: 100rpx;
	height: 51rpx;
	line-height: 51rpx;
	background: #f4f4f4;
	border-radius: 20rpx;
	margin: auto;
	text-align: center;
}
.color-41CB05 {
	color: #41cb05;
}
.toastImg {
	width: 263rpx;
	height: 277rpx;
}
.mt-40 {
	margin-top: 80rpx;
}
</style>
